<template>
	<view class="schedule-page">
		<view class="swiper-box">
			<u-swiper :list="swiperList" height="256rpx"></u-swiper>
		</view>
		<view class="date-time-box">
			<view class="date-time">
				<view v-for="(item,index) in dateList" :key="index" @click="changeDate(item,index)"
					:class="dateIndex == index? 'time-item active' : 'time-item'">
					<view class="week">{{item.dayOfWeek}}</view>
					<view class="date">{{item.date}}</view>
				</view>
			</view>
		</view>
		<!-- 	<view class="date-list">
			<view v-for="(item, index) in scheduleList" :key="index" class="date-item">
				{{ item.time}}
			</view>
		</view> -->
		<view class="schedule-list" v-if="scheduleList.length>0">
			<view v-for="(item, index) in scheduleList" :key="index" class="schedule-item">
				<view class="schedule-time"> {{ item.c_time}}</view>
				<view class="schedule-name"> {{ item.course_name}}</view>
				<view class="schedule-coach"> {{ item.teacher_name}}</view>
			</view>
		</view>
		<view class="no-data" v-if="scheduleList.length==0">暂无课程安排</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				dateIndex: 0,
				dateList: [], //日期列表
				swiperList: ['/static/banner/banner1.png'],
				courses_id: null,
				scheduleList: []
			};
		},
		onLoad(options) {
			this.getNextSevenDays()
			if (options && options.courses_id) {
				this.courses_id = options.courses_id
				this.getCoursesSchedule()
			}
		},
		methods: {
			changeDate(item, index) {
				this.dateIndex = index
				this.getCoursesSchedule()
			},
			getNextSevenDays() {
				const result = [];
				const today = new Date(); // 获取当前日期和时间
				// 预先定义星期几的名称数组
				const dayNames = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"];
				// 遍历接下来的7天
				for (let i = 0; i < 7; i++) {
					// 创建一个新的Date对象，其日期为今天加上i天
					const futureDate = new Date(today);
					futureDate.setDate(today.getDate() + i);

					// 格式化月和日（确保是两位数）
					const monthStr = String(futureDate.getMonth() + 1).padStart(2, '0');
					const dayStr = String(futureDate.getDate()).padStart(2, '0');

					// 获取完整的年月日（格式为YYYY-MM-DD）
					const formattedDate = `${futureDate.getFullYear()}-${monthStr}-${dayStr}`;

					// 将格式化后的日期、星期几和完整的年月日添加到结果数组中
					this.dateList.push({
						date: `${monthStr}.${dayStr}`, // 月和日，格式为MM.DD
						dayOfWeek: dayNames[futureDate.getDay()], // 星期几
						dd: formattedDate // 完整的年月日，格式为YYYY-MM-DD
					});
				}
			},
			getCoursesSchedule() {
				this.$Api.courses.getCoursesSchedule({
					course_id: this.courses_id,
					day: this.dateList[this.dateIndex].dd
				}).then((res) => {
					this.scheduleList = res.data;
				});
			},
		},
	};
</script>

<style lang="scss" scoped>
	.schedule-page {
		height: 100%;
		min-height: 100vh;
		background: #ffffff;

		.date-time-box {
			width: 100%;
			overflow-x: auto;
		}
		.no-data{
			margin: 0 auto;
			padding-top: 120rpx;
			text-align: center;
			font-size: 40rpx;
		}

		.date-time {
			display: flex;
			align-items: center;
			width: min-content;
			padding: 42rpx 32rpx 22rpx;
			box-sizing: border-box;
			background: #ffffff;

			.time-item {
				width: 116rpx;
				height: 116rpx;
				color: #303030;
				font-size: 26rpx;
				border-radius: 24rpx;
				text-align: center;
				margin-right: 20rpx;
				background: #F6F6F8;

				.week {
					margin-top: 16rpx;
				}

				.date {
					font-size: 36rpx;
					font-weight: bold;
					margin-top: 8rpx;
				}
			}

			.active {
				background: #FBFFED;
				border-radius: 24rpx;
				border: 1rpx solid #A3C616;
				color: #a3c616;
			}
		}

		.date-list {
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			margin: 20rpx 30rpx;

			.date-item {
				width: 32%;
				padding: 24rpx 0;
				font-weight: 400;
				font-size: 28rpx;
				color: #323334;
				border: 2rpx solid #A3C616;
				background: #FBFFED;
				text-align: center;
				margin-right: 2%;
				margin-bottom: 20rpx;
				box-sizing: border-box;
			}

			.date-item:nth-child(3n) {
				margin-right: 0;
			}
		}

		.schedule-list {
			margin: 20rpx 24rpx;
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			grid-auto-flow: row;
			grid-gap: 20rpx;


			.schedule-item {
				height: 166rpx;
				border: 2rpx solid #A3C616;
				background: #FBFFED;
				text-align: center;
				margin-bottom: 20rpx;
				box-sizing: border-box;

				.schedule-time {
					font-size: 24rpx;
					margin-top: 28rpx;
				}

				.schedule-name {
					margin-top: 10rpx;
					font-weight: bold;
					font-size: 30rpx;
					padding: 0 10rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}

				.schedule-coach {
					margin-top: 10rpx;
					font-size: 26rpx;
				}
			}
		}
	}
</style>